
<template>
    <div class="search tophead">
        <div class="top">
            <header class="head">
                <van-icon name="arrow-left" size="20" @click="ClickLeft"/>
                <div v-if="type == 'cartoon'">漫画搜索</div>
                <div v-else-if="type == 'fiction'">小说搜素</div>
                <van-icon  name="manager"  size="20"/>
            </header>
            <div>
                <form action="/">
                <van-search
                    v-model="value"
                    :autofocus="true"
                    show-action
                    placeholder="请输入搜索关键词"
                    @search="onSearch"
                    @cancel="onCancel"
                />
                </form>
            </div>
        </div>
        <div>
            <ul v-if="searchlist.length>0&&this.type=='cartoon'" class="list">
                    <li class="shumi" v-for="(l,i) in searchlist" :key="i" @click="getZhangJie(l.cartoonId)">
                        <div>
                            <img v-lazy="l.cover" alt="">
                        </div>
                        <div class="b">
                            <div>
                            <h5 class="shumi-title">{{l.title}}</h5>
                            <p class="shumi-leixin">
                                <span>{{l.cartoonType}}</span>
                                </p>
                            <p class="van-ellipsis shumi-jianjie"><span v-if="l.descs">{{l.descs}}</span> <span v-else>暂无</span></p>
                            <p style="margin-top: 3px; color:#666666">更新时间 : <span style="color:#b93321">{{(l.updateTime).substring(0,10)}}</span></p>
                            <p style="margin-top: 3px; color:#666666">作者: {{l.author}}</p>
                        </div>
                        </div>
                    </li>
            </ul>
            <ul v-else-if="searchlist.length>0&&this.type=='fiction'" class="list">
                    <li class="shumi" v-for="(l,i) in searchlist" :key="i" @click="bookZhangJie(l.fictionId)">
                        <div>
                            <img v-lazy="l.cover" alt="">
                        </div>
                        <div class="b">
                            <div>
                            <h5 class="shumi-title">{{l.title}}</h5>
                            <p class="shumi-leixin">
                                <span>{{l.fictionType}}</span>
                                </p>
                            <p class="van-ellipsis shumi-jianjie"><span v-if="l.descs">{{l.descs}}</span> <span v-else>暂无</span></p>
                            <p style="margin-top: 3px; color:#666666">更新时间 : <span style="color:#b93321">{{(l.updateTime).substring(0,10)}}</span></p>
                            <p style="margin-top: 3px; color:#666666">作者: {{l.author}}</p>
                        </div>
                        </div>
                    </li>
            </ul>
            <div v-else class="zanwu">
                请输入搜索关键词
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            value:"",
            type:"",
            searchlist:[],
        }
    },
    methods:{
        bookZhangJie(fictionId){
            console.log(fictionId)
            this.$router.push(
                {name:"zhangjie",
                query:{fictionId:fictionId}
                    }
                )
        },
        getZhangJie(cartoonId){
            console.log(cartoonId)
            this.$router.push({name:"mhlist",
                query:{cartoonId:cartoonId}
            })
        },
         ClickLeft(){
            this.$router.back(-1);
        },
        onSearch(val) {
            console.log(val,this.type);
            this.$ajax.search({
                value:val,
                type:this.type
            }).then(res=>{
                if(res.code==200){
                    this.searchlist = res.data?res.data:this.searchlist
                }
            })
        },
        onCancel() {
            console.log('取消');
        },
    },
    mounted(){
        this.type = this.$route.query.title
    }
}
</script>

<style lang="scss" scoped>
.top{
    width: 100%;
    height: 46px;
    background-color: #b83320;
    position: fixed;
    top:0;
    z-index:100;
    header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        font-size: 16px;
        line-height: 46px;
        color: #fff;
        padding: 0 20px;
    }
}

.list{
    height: 100%;
    background-color: #fff;
    overflow-y: auto;
    .shumi{
    height: 140px;
    width: 100%;
    padding: 14px;
    border-bottom:1px solid #aaaaaa; 
    display: flex;
    align-items: center;
        img{
            width: 70px;
            height: 90px;
        }
        .b{
            padding-left: 10px;
            width: 80%;
            .shumi-title{
            font-size:14px;
            font-weight: 600;
            color: #b93321;
        }
        .shumi-leixin{
            margin-top: 3px;
            font-size: 12px;
            color: #999999;
        }
        .shumi-jianjie{
            margin-top: 3px;
            font-size: 12px;
            color: #999999;
        }
        }
    }
}
.zanwu{
        width: 100%;
        height: 80vh;
        line-height: 80vh;
        text-align: center;
        font-size: 25px;
        font-weight: 600px;
        color: #999999;
    }
</style>


